oa.view.rf.properFractionsAsSquareParts = {
/**
 * Render the structure of an ProperFractionsAsSquareParts
 *
 * @author Bogdan Cataron
 * @param {ArithmeticProblem} ap  An arithmetic problem.
 */
render: function( ap) {
  var el = {};
  var rB = document.getElementById("renderBox");
  var apDivEl = dom.createDiv("properFractionsAsSquareParts");
  var restSquare = dom.createDiv("restSquare");
  var givenFraction = dom.createDiv("givenF","fraction");
  var btnWrapper = dom.createDiv("btnWrapper","moveButtonUp");
  apDivEl.setAttribute("data-nmrofops", ap.type.operators.length);
  rB.appendChild(apDivEl);
  // square
  el = dom.createDiv ("square");
  apDivEl.appendChild( el);
  // equality symbol
  el = dom.createDiv("equalitySymbol","operatorFraction");
  el.innerHTML = "=";
  restSquare.appendChild(el);
  // numerator
  el = dom.createNumInput ("askedForNum","operand","numerator");
  el.addEventListener("input", oa.view.handleUserInputFractionChooser, false);
  givenFraction.appendChild(el);  
  // slash
  el = document.createElement("hr");
  el.setAttribute("class", "slash");
  givenFraction.appendChild(el);   
  // denominator
  el = dom.createNumInput ("askedForDenom","operand","denominator");
  el.addEventListener("input", oa.view.handleUserInputFractionChooser, false);
  givenFraction.appendChild(el);
  restSquare.appendChild(givenFraction);   
  // configure the submit/continue button
  el = dom.createButton("submitButton","blue","?");
  el.addEventListener("click", oa.view.handleFractionChooserSubmit, false);   
  btnWrapper.appendChild( el);
  restSquare.appendChild( btnWrapper);  
  apDivEl.appendChild(restSquare);
  document.addEventListener("keypress", oa.view.handleKeyPressFractionChooser, true); 
},
/**
 * Fill an already rendered problem equation with new values for operands and result
 *
 * @author Bogdan Cataron
 * @param {ArithmeticProblem} ap  An arithmetic problem.
 */
fill: function( ap) {
  //if the denominator is multiple of 2, that means we can put those parts of the Square on two lines 
  if (ap.result[1] % 2 == 0) {
	oa.view.rf.properFractionsAsSquareParts.divideSquareInMultipleOf2Parts(ap.result[0], ap.result[1]);
  } else if (ap.result[1] % 3 == 0) {
    oa.view.rf.properFractionsAsSquareParts.divideSquareInMultipleOf3Parts(ap.result[0], ap.result[1]);
  } else {
	oa.view.rf.properFractionsAsSquareParts.divideSquareInXParts(ap.result[0], ap.result[1]);
  }
}
};
//if the denominator is multiple of 2, that means we can put those parts of the Square on two lines 
oa.view.rf.properFractionsAsSquareParts.divideSquareInMultipleOf2Parts = function(num, den){
  var xmlns = "http://www.w3.org/2000/svg";
  var width = 200;
  var height = 200;
  var rectWidth = 0;
  var rectHeight = 0;
  //the number of Square Parts divided already
  var dividedParts = 0;
  var emptyColor = "none";
  var z = util.randomInt( 0, 7);
  var fillColor = oa.view.backgroundColors[z];
  //here we create an SVG 
  var svg = document.createElementNS(xmlns, "svg");
  svg.setAttribute("version", "1.1");
  svg.setAttribute("width", width);
  svg.setAttribute("height",height);
  var sx = 0, sy = 0;
  nrParts = den / 2;
  verticalDistance = width / nrParts;
  horizontalDistance = height / 2;
  rectWidth = verticalDistance;
  rectHeight = horizontalDistance;
  //for every line of the main square
  for (var j=1; j<=2; j++) {
	// here we construct a part of the Square (rect ) using the computed startX, startY and new width and height
	//if we still have to paint parts of the Square, we use the filledColor in the Attribute "fill" and increase the number of dividedParts
	if (num > dividedParts){  
	  fillColor = oa.view.backgroundColors[z];
	  oa.view.rf.properFractionsAsSquareParts.createRect(sx, sy, rectWidth, rectHeight, fillColor);
      svg.appendChild(el);  
	  dividedParts = dividedParts + 1;
	  //if we painted enough parts of the Square, we use the emptyColor in the "fill" Attribute and increase the number of dividedParts
	} else {
	  fillColor = emptyColor;
	  oa.view.rf.properFractionsAsSquareParts.createRect(sx, sy, rectWidth, rectHeight, fillColor);
	  svg.appendChild(el); 
	  dividedParts = dividedParts+1;	  
	}
	for (var i=1; i<nrParts; i++) {
	  //here we construct and append the remaining rectangles from the line
	  sx = sx + verticalDistance;
	  // here we construct a part of the Square (rect ) using the computed startX, startY and new width and height
	  //if we still have to paint parts of the Square, we use the filledColor in the Attribute "fill" and increase the number of dividedParts	
	  if (num > dividedParts) {
		fillColor = oa.view.backgroundColors[z];
		oa.view.rf.properFractionsAsSquareParts.createRect(sx, sy, rectWidth, rectHeight, fillColor);
		svg.appendChild(el);  
		dividedParts = dividedParts + 1;
	    //if we painted enough parts of the Square, we use the emptyColor in the "fill" Attribute and increase the number of dividedParts
	  } else {
		fillColor = emptyColor;
		oa.view.rf.properFractionsAsSquareParts.createRect(sx, sy, rectWidth, rectHeight, fillColor);
		svg.appendChild(el); 
		dividedParts = dividedParts + 1;	  
	  }
    }
	//go to the next line of rectangles from the main square
	sx = 0;
	sy = sy + horizontalDistance;
  }
  //delete previous square
  square = document.getElementById("square");
  while (square.firstChild)
  square.removeChild(square.firstChild);
  //add new one
  square.appendChild(svg); 
  // clear inputs
  document.getElementById("askedForNum").value = "";
  document.getElementById("askedForDenom").value = "";
};
//if the denominator is multiple of 3, that means we can put those parts of the Square on 3 lines 
oa.view.rf.properFractionsAsSquareParts.divideSquareInMultipleOf3Parts = function (num, den){
  var xmlns = "http://www.w3.org/2000/svg";
  var width = 200;
  var height = 200;
  var rectWidth = 0;
  var rectHeight = 0;
  //the number of Square Parts divided already
  var dividedParts = 0;
  var fillColor;
  emptyColor = "none";
  var z = util.randomInt( 0, 7);
  fillColor = oa.view.backgroundColors[z];
  //here we create an SVG 
  var svg = document.createElementNS(xmlns, "svg");
  svg.setAttribute("version", "1.1");
  svg.setAttribute("width", width);
  svg.setAttribute("height",height);
  var sx = 0;
  var sy = 0;
  nrParts = den / 3;
  verticalDistance = width / nrParts;
  horizontalDistance = height / 3;
  rectWidth = verticalDistance;
  rectHeight = horizontalDistance;
  //for every line of the main square
  for (var j=0; j<3; j++) {
	// here we construct a part of the Square (rect ) using the computed startX, startY and new width and height
	//if we still have to paint parts of the Square, we use the filledColor in the Attribute "fill" and increase the number of dividedParts    
	if (num > dividedParts) {
	  fillColor = oa.view.backgroundColors[z];
	  oa.view.rf.properFractionsAsSquareParts.createRect(sx, sy, rectWidth, rectHeight, fillColor);
	  svg.appendChild(el);  
	  dividedParts = dividedParts + 1;
	  //if we painted enough parts of the Square, we use the emptyColor in the "fill" Attribute and increase the number of dividedParts
	} else {
	  fillColor = emptyColor;
	  oa.view.rf.properFractionsAsSquareParts.createRect(sx, sy, rectWidth, rectHeight, fillColor);
	  svg.appendChild(el); 
	  dividedParts = dividedParts + 1;	  
	}
	for (var i=1; i<nrParts; i++) {
	  //here we construct and append the remaining rectangles from the line
	  sx = sx + verticalDistance;
	  // here we construct a part of the Square (rect ) using the computed startX, startY and new width and height
	  //if we still have to paint parts of the Square, we use the filledColor in the Attribute "fill" and increase the number of dividedParts    
	  if (num > dividedParts) {
		fillColor = oa.view.backgroundColors[z];
		oa.view.rf.properFractionsAsSquareParts.createRect(sx, sy, rectWidth, rectHeight, fillColor);
		svg.appendChild(el);  
		dividedParts = dividedParts + 1;
		//if we painted enough parts of the Square, we use the emptyColor in the "fill" Attribute and increase the number of dividedParts
	  } else {
		fillColor = emptyColor;
		oa.view.rf.properFractionsAsSquareParts.createRect(sx, sy, rectWidth, rectHeight, fillColor);
		svg.appendChild(el); 
		dividedParts = dividedParts + 1;	  
	  }
	}
	//go to the next line of rectangles from the main square
	sx = 0;
	sy = sy + horizontalDistance;
  }
  //delete previous square
  square = document.getElementById("square");
  while (square.firstChild)
  square.removeChild(square.firstChild);
  //add new one
  square.appendChild(svg); 
  // clear inputs
  document.getElementById("askedForNum").value = "";
  document.getElementById("askedForDenom").value = "";	
};
//if it is a prime number (ex. 5, 7), we have only one line with X columns where X is the denominator of given fraction
oa.view.rf.properFractionsAsSquareParts.divideSquareInXParts = function (num, den){
  var xmlns = "http://www.w3.org/2000/svg";
  var width = 205;
  var height = 205;
  var rectWidth = 0;
  var rectHeight = 0;
  //the number of Square Parts divided already
  var dividedParts = 0;
  var fillColor;
  emptyColor = "none";
  var z = util.randomInt( 0, 7);
  fillColor = oa.view.backgroundColors[z];
  //here we create an SVG 
  var svg = document.createElementNS(xmlns, "svg");
  svg.setAttribute("version", "1.1");
  svg.setAttribute("width", width);
  svg.setAttribute("height",height);
  var sx = 0;
  var sy = 0;
  nrParts = den;
  verticalDistance = width / nrParts;
  horizontalDistance = height;
  rectWidth = verticalDistance;
  rectHeight = horizontalDistance;
  // here we construct a part of the Square (rect ) using the computed startX, startY and new width and height
  //if we still have to paint parts of the Square, we use the filledColor in the Attribute "fill" and increase the number of dividedParts    
  if (num > dividedParts) {
	fillColor = oa.view.backgroundColors[z];
	oa.view.rf.properFractionsAsSquareParts.createRect(sx, sy, rectWidth, rectHeight, fillColor);
	svg.appendChild(el);  
	dividedParts = dividedParts + 1;
	//if we painted enough parts of the Square, we use the emptyColor in the "fill" Attribute and increase the number of dividedParts
  } else {
	fillColor = emptyColor;
	oa.view.rf.properFractionsAsSquareParts.createRect(sx, sy, rectWidth, rectHeight, fillColor);
	svg.appendChild(el); 
	dividedParts = dividedParts + 1;	  
  }
  for (var i=1; i<nrParts; i++) {
	//here we construct and append the remaining rectangles from the line
	sx = sx + verticalDistance;
	// here we construct a part of the Square (rect ) using the computed startX, startY and new width and height
	//if we still have to paint parts of the Square, we use the filledColor in the Attribute "fill" and increase the number of dividedParts    
	if (num > dividedParts) {
	  fillColor = oa.view.backgroundColors[z];
	  oa.view.rf.properFractionsAsSquareParts.createRect( sx, sy, rectWidth, rectHeight, fillColor);
	  svg.appendChild(el);  
	  dividedParts = dividedParts + 1;
	  //if we painted enough parts of the Square, we use the emptyColor in the "fill" Attribute and increase the number of dividedParts
    } else {
	  fillColor = emptyColor;
	  oa.view.rf.properFractionsAsSquareParts.createRect( sx, sy, rectWidth, rectHeight, fillColor);
	  svg.appendChild(el); 
	  dividedParts = dividedParts + 1;	  
	}
  }
  //delete previous square
  square = document.getElementById("square");
  while (square.firstChild)
  square.removeChild(square.firstChild);
  //add new one
  square.appendChild(svg); 
  // clear inputs
  document.getElementById("askedForNum").value = "";
  document.getElementById("askedForDenom").value = "";
};
//function for creating rect parts of the main Square
oa.view.rf.properFractionsAsSquareParts.createRect = function (sx, sy, rectWidth, rectHeight, fillColor){
 var xmlns = "http://www.w3.org/2000/svg";
 el = document.createElementNS(xmlns, "rect");
 el.setAttribute("x", sx);
 el.setAttribute("y", sy);
 el.setAttribute("width", rectWidth);
 el.setAttribute("height", rectHeight);
 el.setAttribute("stroke", "black");
 el.setAttribute("stroke-width", "2");
 el.setAttribute("fill", fillColor);  
};

